<template>
	<view class="body">
		<view class="top">
			<u-navbar title="余额转入" bgColor="#2393FF" leftIconColor="#FFFFFF" :titleStyle="{color:'#FFFFFF'}"
				:autoBack="true">
			</u-navbar>
			<view class="topData flex-between">
				<view class="left">
					<view class="title">可用余额(元)</view>
					<view class="price"> <text class="pIcon">￥</text> {{ nowMoney ||0 }}</view>
				</view>
				<button class="right" @click="goDetail">余额明细</button>
			</view>
		</view>
		<view class="content">
			<view :class="active==2?'nav':'nav2'">
				<zb-tab :activeStyle="{fontWeight: 'bold',transform: 'scale(1.1)'}" :data="tabList" v-model="active"
					lineWidth="100rpx"></zb-tab>
			</view>
			<view class="contain">
				<!-- 余额转增 -->
				<view class="" v-if="active==2">
					<view class="flex">
						<view class="flex left">
							<text>￥</text>
							<input v-model="userInfo.amount" type="number" />
						</view>
						<button class="right" @click="getallMoney">全部转增</button>
					</view>

					<view class="tip flex-between">
						<view class="">当前余额：{{nowMoney || 0}}</view>
					</view>
					<view class="title">转增到</view>
					<view class="informationForm">
						<p class="leftTitle">转增人姓名</p>
						<input class="rightInput" v-model="userInfo.name" type="text" placeholder="请输入转增人姓名" />
					</view>
					<view class="informationForm" style="margin-top: 24rpx;">
						<p class="leftTitle">转增人手机号</p>
						<input class="rightInput" v-model="userInfo.phone" type="number" placeholder="请输入转增人手机号" />
					</view>
					<view class="agreement flex">
						<image :src="isAgree?'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/tixian3.png':'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/tixian2.png'"
							mode="" @click="isAgree = !isAgree"></image>
						我已知晓并同意<navigator url="" class="title">《平台余额协议》</navigator>
					</view>
					<button class="btn" @click="handleBalance">确认转增</button>
				</view>

				<!-- 佣金转入 -->
				<view class="" v-if="active==1">
					<view class="flex">
						<view class="flex left">
							<text>￥</text>
							<input v-model="amount" type="number" />
						</view>
						<button class="right" @click="allMoney">全部转增</button>
					</view>

					<view class="tip flex-between">
						<view class="">可用佣金：{{commission ||0}}</view>
					</view>

					<view class="agreement flex">
						<image :src="isAgree?'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/tixian3.png':'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/tixian2.png'"
							mode="" @click="isAgree = !isAgree"></image>
						我已知晓并同意<navigator url="" class="title">《平台余额协议》</navigator>
					</view>
					<button class="btn" @click="handleReward">确认转入</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getRechargeGear,
		increaseByTransferring,
		rewardTransfer,
		postCreateOrder
	} from '@/api/order.js';

	import {
		getInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				active: 2,
				selectedOptionIndex: 0, // 新增的数据属性，用于存储选中的选项索引
				amount: '',
				userInfo: {
					name: '',
					phone: '',
					amount: ''
				},
				tabList: [
					// {
					// 	name: '账户充值',
					// 	value: 0,
					// },
					{
						name: '余额转增',
						value: 2,
					},
					{
						name: '佣金转入',
						value: 1,
					}
				],
				rechargeOptions: [],
				nowMoney: "",
				commission: "",
				isAgree:false,//是否同意协议
			};
		},
		onLoad(option) {
			this.active = Number(option.active)
			this.getRechargeGearList()
			this.getUser()
		},
		methods: {
			//获取用户信息
			getUser() {
				getInfo().then(res => {
					this.nowMoney = res.data.nowMoney
					this.commission = res.data.commission
				});
			},
			getRechargeGearList() {
				const params = {
					pageSize: 99,
					pageNumber: 1
				};
				console.log(params, "params")
				getRechargeGear(params).then(res => {
					this.rechargeOptions = res.data
				})
			},
			//选中金额
			selectOption(index) {
				this.selectedOptionIndex = index; // 设置选中的选项索引
			},
			//佣金全部转入
			allMoney() {
				this.amount = this.commission
			},
			//余额全部转增
			getallMoney() {
				this.userInfo.amount = this.nowMoney
			},
			// 账户充值
			handleRecharge() {
				const params = {
					payType: 2,
					tradeType: 0,
					rechargeId: this.rechargeOptions[this.selectedOptionIndex].id
				};
				postCreateOrder(params).then(res => {
					let orderInfo = {
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageValue,
						signType: res.data.signType,
						paySign: res.data.paySign
					};
					uni.requestPayment({
						...orderInfo,
						success: (res) => {
							console.log('支付成功', res);
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							});
							this.getUser()
						},
						fail: (err) => {
							console.error('支付失败', err);
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							});
						}
					});
				})
			},
			//佣金转入
			handleReward() {
				if (!this.amount || this.amount <= 0) {
					uni.showToast({
						title: '请输入金额',
						icon: 'none'
					});
					return
				}
				if(!this.isAgree){
					uni.showToast({
						title: '请勾选协议~',
						icon: 'none'
					});
					return
				}
				const params = {
					amount: this.amount,
				};
				rewardTransfer(params).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					this.getUser()
					this.amount = ''
				})
			},
			//余额转增
			handleBalance() {
				if (!this.userInfo.amount || this.userInfo.amount <= 0) {
					uni.showToast({
						title: '请输入转增金额',
						icon: 'none'
					});
					return
				}
				if (!this.userInfo.name || !this.userInfo.phone) {
					uni.showToast({
						title: '请输入转增人姓名及手机号',
						icon: 'none'
					});
					return
				}
				if(!this.isAgree){
					uni.showToast({
						title: '请勾选协议~',
						icon: 'none'
					});
					return
				}
				increaseByTransferring(this.userInfo).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					this.getUser()
					this.userInfo = {
						name: '',
						phone: '',
						amount: ''
					}
				})
			},
			// 跳转到余额明细
			goDetail() {
				uni.navigateTo({
					url: "/pages/users/balanceStatement/balanceStatement"
				})
			}
		}
	};
</script>

<style lang="scss">
	.body {
		position: relative;
		background-color: #f7f7f7;
	}

	.top {
		width: 100%;
		height: 428rpx;
		background-image: url('https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/tixian1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.topData {
		padding: 248rpx 56rpx 46rpx;

		.left {
			color: #FFFFFF;

			.title {
				font-size: 24rpx;
			}

			.price {
				margin-top: 14rpx;
				font-weight: bold;
				font-size: 72rpx;
				text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);

				.pIcon {
					font-size: 32rpx;
				}
			}
		}

		.right {
			width: 166rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			background: #FFFFFF;
			box-shadow: 0px 6px 12px 2px rgba(204, 204, 204, 0.16);
			border-radius: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-size: 24rpx;
			color: #2393FF;
		}
	}

	.content {
		padding: 24rpx 0rpx;
		margin: 0 32rpx;
		position: relative;

		box-shadow: 0px 6px 12px 2px rgba(204, 204, 204, 0.16);

		.nav {
			width: 100%;
			height: 94rpx;
			background-image: url('https://store-profit-system.oss-cn-shanghai.aliyuncs.com/%E6%8F%90%E7%8E%B0%E9%A1%B5%E9%9D%A2%E5%8E%BB%E6%8A%95%E5%BD%B1/102.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.nav2 {
			width: 100%;
			height: 94rpx;
			background-image: url('https://store-profit-system.oss-cn-shanghai.aliyuncs.com/%E6%8F%90%E7%8E%B0%E9%A1%B5%E9%9D%A2%E5%8E%BB%E6%8A%95%E5%BD%B1/103.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.contain {
			background: #FFFFFF;
			border-top: 2rpx solid #F5F5F5;
			border-radius: 0 0 8rpx 8rpx;
			padding: 40rpx 24rpx;

			.left {
				flex: 1;
				background-color: rgba(204, 204, 204, 0.16);
				height: 88rpx;
				line-height: 88rpx;
				padding: 0 24rpx;
				border-radius: 14rpx;

				text {}

				input {
					;
					font-weight: bold;
					font-size: 48rpx;
					color: #28314C;
				}
			}

			.right {
				width: 154rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #2393FF;
				border-radius: 14rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.tip {
				font-weight: 500;
				font-size: 24rpx;
				color: #637697;
				padding: 18rpx 0 18rpx;
				border-bottom: 2rpx solid #F5F5F5;
			}

			.title {
				padding: 18rpx 0 18rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #28314C;
			}

			.informationForm {
				width: 649rpx;
				height: 87rpx;
				display: flex;
				justify-content: flex-start;
				flex-wrap: nowrap;
				border-radius: 46rpx;
				background: #F7F7F7;
				padding: 0 24rpx;
				box-sizing: border-box;

				.leftTitle {
					width: 197rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #28314C;
					font-weight: 600;
					line-height: 87rpx;
					text-align: left;
					font-style: normal;
				}

				.rightInput {
					width: 460rpx;
					height: 87rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #000;
					line-height: 87rpx;
					text-align: right;
					font-style: normal;
				}
			}

			.agreement {
				font-weight: 500;
				font-size: 24rpx;
				color: #D2D2D2;
				padding: 20rpx 0 38rpx;

				image {
					width: 31rpx;
					height: 31rpx;
					margin-right: 10rpx;
				}

				.title {
					font-weight: 500;
					font-size: 24rpx;
					color: #2393FF;
				}
			}

			.btn {
				width: 638rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				background: #0077FF;
				border-radius: 14rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}

	.balance-box {
		background: linear-gradient(to right, #639DFF, #498CFF);
		border: 2rpx solid #fff;
		border-radius: 20px;
		padding: 30rpx;

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #fff;
			line-height: 34px;
		}

		.balance {
			margin-top: 20rpx;
			font-size: 50rpx;
			color: #fff;
			line-height: 34rpx;
		}
	}

	.recharge {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		// height: 314rpx;
		border-radius: 20rpx;
		margin: 20rpx 0rpx;
		text-align: center;
		padding: 18rpx 20rpx;

		.option {
			width: 30%;
			background-color: white;
			border-radius: 10rpx;
			font-size: 26rpx;
			margin: 10rpx;
			background-color: #fff;
			line-height: 50rpx;
			padding-top: 16rpx;

			// 当选项被选中时应用的样式
			&.selected {
				color: #fff; // 白色字体
				background: linear-gradient(to right, #639DFF, #498CFF);
			}
		}
	}

	.reward {
		padding: 40rpx;

		.list {
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;

			.name {
				width: 69rpx;
				height: 100rpx;
				font-weight: bold;
				font-size: 60rpx;
				line-height: 100rpx;
			}

			.input {
				width: 430rpx;
				height: 100rpx;
				font-weight: 400;
				font-size: 30rpx;
				line-height: 100rpx;
			}

			.all {
				width: 103rpx;
				height: 100rpx;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 100rpx;
			}

		}

		.xian {
			height: 1rpx;
			background: #E3E3E3;
		}

		.moneyBoxBnt {
			font-size: 28rpx;
			width: 258rpx;
			height: 68rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 58rpx;
			background-color: #085CD6 !important;
			margin: 20rpx auto;
		}
	}

	.information {
		border-radius: 24rpx;
		margin: auto;
		padding: 24rpx;


	}

	.notice {
		margin-top: 40rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 44rpx;
	}

	.bottom-button {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		background-color: #085CD6;
		border-radius: 80rpx;
		position: fixed;
		bottom: 100rpx;
		left: 10%;
		z-index: 1000;
	}
</style>